import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import './index.css';

// 价值评估统计
export default function index() {
  const init = () => {
    var myChart = echarts.init(document.getElementById('khfl2'));
    myChart.setOption({
      title: {
        top: '10px',
        left: '30px',
        text: '客户数量',
        textStyle: {
          color: 'black',
          fontSize: '12px',
          fontWeight: 'normal',
        },
      },
      tooltip: {
        trigger: 'axis',
        show: true,
        axisPointer: {},
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        axisLabel: { interval: 0, rotate: 30 },
        type: 'category',
        boundaryGap: false,
        data: [
          '安徽省',
          '澳门',
          '北京市',
          '福建省',
          '甘肃省',
          '广东省',
          '广西省',
          '贵州',
          '海南',
          '海外',
          '河北省',
          '河南省',
          '黑龙江',
          '湖北省',
          '湖南省',
          '吉林省',
          '江苏省',
          '江西省',
          '辽宁省',
          '内蒙古',
        ],
      },

      yAxis: {
        type: 'value',
      },
      dataZoom: [
        {
          type: 'inside',
        },
      ],
      dataZoom: [
        {
          type: 'inside',
        },
      ],
      series: [
        {
          name: '客户数量',
          data: [
            1, 0, 11, 10, 22, 9, 1, 1, 0, 1, 4, 1, 2, 1, 3, 18, 4, 1, 0, 2,
          ],
          label: {
            show: true,
            position: 'top',
          },
          type: 'line',
          areaStyle: {},
          smooth: true,
          color: '#fcce10',
        },
      ],
    });
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <div
      className="customer"
      style={{ backgroundColor: 'white', width: '48%', height: '400px' }}
    >
      <div className="customertitle">
        <span>客户区域统计</span>
        <img
          src=""
          alt=""
        />
      </div>
      <div id="khfl2" style={{ widht: '100%', height: '100%' }}></div>
    </div>
  );
}
